<template>
    <el-container>
        <el-header class='el-header'>
            <div style="font-size:24px;color:#333333;text-align:left;margin-left:50px;margin-top:30px;">
                我的图谱
            </div>
            <div style="font-size:12px;color:#333333;text-align:left;margin-left:50px;margin-top:4px;">
                对创建的图谱进行 查看 | 管理 | 修改
            </div>
        </el-header>

        <el-main class="main">
            <div style="width:1200px;margin-left:20px;">
                <el-card :body-style="{ padding: '0px' }" v-for="(graph, index) in graphs" :key="index" round plain type="primary" shadow="hover" style="float:left;width:25%;margin-left:10px;margin-right:10px;margin-bottom:20px">
                    <img :src="imagePath" class="image" style="width:100%;display: block;">
                    <div style="padding: 14px;">
                        <span style="font-size:20px;width:300px;">{{ graph.name }}</span>
                        <el-button style="float: right; padding: 5px 5px" round icon="el-icon-delete" @click="deleteGraph(graph.name)"></el-button>
                    </div>
                    <div style="text-align:left;margin-left:30px;color:#909399;font-size:14px;">
                        创建日期: {{ graph.date }}
                    </div>
                    <div style="text-align:left;margin-left:30px;color:#909399;font-size:14px;">
                        数据类型: {{ graph.type }}
                    </div>
                    <el-button round @click="selectGraph(index)" style="margin-top:20px;margin-bottom:20px;">详细信息</el-button>

                    <el-dialog
                    title="图谱信息"
                    :visible.sync="dialogVisible"
                    width="30%"
                    center>
                        <div style="font-size:14px;color:#606266;text-align:left;margin-left:30px;">
                            图谱实体
                        </div>
                        <h2 style="margin-top:4px;margin-left:30px;margin-right:30px;height:1px;background-color:#C0C4CC"></h2>
                        <div style="float:left;margin-left:30px;margin-right:25px;margin-bottom:20px;">
                            <el-tag v-for="(entity, index) in graphs[selectIndex].entities" :key="index" round plain type="primary" style="margin-right:10px;margin-bottom:5px;float:left;">
                                {{ entity }}
                            </el-tag>
                        </div>

                        <div style="margin-top:80px;text-align:left;margin-left:30px;font-size:14px;color:#606266;">
                            图谱关系
                        </div>
                        <h2 style="margin-top:4px;margin-left:30px;margin-right:30px;height:1px;background-color:#C0C4CC"></h2>
                        <div style="margin-bottom:100px;margin-right:25px;margin-left:30px">
                            <el-tag v-for="(relation, index) in graphs[selectIndex].relations" :key="index" round plain type="primary" style="margin-right:10px;margin-bottom:5px;float:left;">
                                {{ relation }}
                            </el-tag>
                        </div>

                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="showSelectGraph()" :loading="loadingbut" :icon="btnIcon">{{ loadingbutText }}</el-button>
                        </span>
                    </el-dialog>

                </el-card>


            </div>

        </el-main>
    </el-container>
</template>

<script>
import axios from 'axios'
import icon_url from '@/assets/icon-2.png'
import image_path from '@/assets/1.png'
import finish_icon_path from '@/assets/complete.png'
export default {
    name:"upload",
    data() {
        return {
            name: "上传文件",
            checkStatus: "",
            activeTab: 'first',
            imagePath: image_path,
            selectIndex: 0,
            loadingbut:false,
            loadingbutText:"查看图谱",
            icon:"",
            dialogVisible: false,
            graphs:[],
            btnIcon: "",
        }
    },
    methods: {
        selectGraph(index){
            console.log(index);
            this.selectIndex = index;
            this.dialogVisible = true;
        },
        showSelectGraph(){
            var graphName = this.graphs[this.selectIndex].name;
            console.log('Show Graph: ',graphName);
            var info = {"name": graphName};
            // 将选中的图谱名称传给后端

            this.loadingbut = true;
            this.loadingbutText = "生成中...";
            this.btnIcon = "el-icon-loading";

            axios.post("http://localhost:8000/polls/show_select_graph/",JSON.stringify(info),{
                headers: {
                    'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'
                }
            }).then(res => {
                var data = res.data.data;
                var links = res.data.links;
                var entities = res.data.entities;
                var relations = res.data.relations;
                this.$router.push({
                    name:'Kgshow_Disease',
                    params:{
                        data:data,
                        links:links,
                        entities:entities,
                        relations:relations,
                    }

                })
                this.dialogVisible = false;
                this.loadingbut = false;
                this.loadingbutText = "查看图谱";
            });


        },
        deleteGraph(name){
            console.log('Delete Graph: ', name);
            var info = {"name": name};
            // 将选中的图谱名称传给后端
            this.$confirm('此操作将永久删除该图谱, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    axios.post("http://localhost:8000/polls/delete_graph/",JSON.stringify(info),{
                        headers: {
                            'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'
                        }
                    }).then(res => {
                        console.log(res);
                        axios.get("http://localhost:8000/polls/all_graph_info/").then(res=>{
                            this.graphs = res.data;
                        })
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
            });
        },
        showSelectGraph(){
            var graphName = this.graphs[this.selectIndex].name;
            var info = {"name": graphName};
            axios.post("http://localhost:8000/polls/show_select_graph/",JSON.stringify(info),{
                headers: {
                    'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'
                }
            }).then(res => {
                console.log(res);
                var data = res.data.data;
                var links = res.data.links;
                var entities = res.data.entities;
                var relations = res.data.relations;
                this.$router.push({ 
                    name:'Kgshow_Disease',
                    params:{
                        data:data,
                        links:links,
                        entities:entities,
                        relations:relations,
                    }
                })
            });
        }

    },
    mounted: function(){
	    axios.get("http://localhost:8000/polls/all_graph_info/").then(res=>{
            this.graphs = res.data;
        })
    }
}
</script>
<style scoped>
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }
    .el-aside{
        background-color: #2b3a49;
    }

    .main{
        background-color: #f3f3f4;
        margin-top:60px;
    }
    .main-container{
        position:absolute;
        height:100%;
        width:100%;
    }
    .card-box{
        margin-top:100px;
    }
    .tab-title{
        color:#fff;
    }

</style>